<style>
    #sensorTypeForm .file{position: relative;}
    #sensorTypeForm .file input[type="file"]{
        position: absolute;
        width: 94%;
        height: 100%;
        opacity: 0;
        top:0;
    }
    #sensorTypeForm img{padding:0 15px;max-width: 75%;display: none;}
</style>

<form class="form-horizontal" role="form" id="sensorTypeForm">
    <input type="hidden" name="id">
    <div class="form-group">
        <label  class="col-sm-3 control-label">传感器类别名称</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="name"/>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-3 control-label">传感器类别图标</label>
        <div class="col-sm-9 file">
            <input type="text" class="form-control" name="logo"/>
            <input type="file" name="file" accept="image/*">
        </div>
        <img class="col-sm-offset-3">
    </div>
    <div class="form-group">
        <label  class="col-sm-3 control-label">属性值个数</label>
        <div class="col-sm-9">
            <input type="number" class="form-control" name="valueNumber"/>
        </div>
    </div>
</form>
<script>
    var img,reader=new FileReader();
    $('#sensorTypeForm').on("change","input:file",function(){
        img=$(this).parent().next();
        $(this).prev().val($(this).val());
        reader.readAsDataURL(this.files[0]);
    });
    reader.onload=function (e) {
        img.attr("src",e.target.result).show();
    }
    $('[name="valueNumber"]').change(function () {
        var num=$(this).val();
        if(num<=0){
            modals.error("请输入大于0的正整数");
            $(this).val($("#sensorTypeForm .property").length/5);
            return;
        }
        $("#sensorTypeForm .property:gt("+(num*5-1)+")").remove();
        for(var i=$("#sensorTypeForm .property").length/5+1;i<=num;i++){
            var id=$('<input class="property" type="hidden" name="propertyId'+i+'">');
            $("#sensorTypeForm").append(id);

            var formGroup=$('<div class="form-group property"></div>');
            var label=$('<label  class="col-sm-3 control-label"></label>');
            label.text("属性值"+i+"名称");
            var valueDiv=$('<div class="col-sm-9"></div>');
            var input=$('<input type="text" class="form-control" name="propertyName'+i+'"/>');
            valueDiv.append(input);
            formGroup.append(label).append(valueDiv);
            $("#sensorTypeForm").append(formGroup);

            var formGroup=$('<div class="form-group property"></div>');
            var label=$('<label  class="col-sm-3 control-label"></label>');
            label.text("属性值"+i+"别名");
            var valueDiv=$('<div class="col-sm-9"></div>');
            var input=$('<input type="text" class="form-control" name="propertyAlias'+i+'"/>');
            valueDiv.append(input);
            formGroup.append(label).append(valueDiv);
            $("#sensorTypeForm").append(formGroup);

            var formGroup=$('<div class="form-group property"></div>');
            var label=$('<label  class="col-sm-3 control-label"></label>');
            label.text("属性值"+i+"单位");
            var valueDiv=$('<div class="col-sm-9"></div>');
            var input=$('<input type="text" class="form-control" name="propertyUnit'+i+'"/>');
            valueDiv.append(input);
            formGroup.append(label).append(valueDiv);
            $("#sensorTypeForm").append(formGroup);

            var formGroup=$('<div class="form-group property"></div>');
            var label=$('<label  class="col-sm-3 control-label"></label>');
            label.text("属性值"+i+"图标");
            var valueDiv=$('<div class="col-sm-9 file"></div>');
            var input=$('<input type="text" class="form-control" name="icon'+i+'"/>');
            var inputFile=$('<input type="file" accept="image/*" name="propertyFile'+i+'"/>');
            valueDiv.append(input).append(inputFile);
            var img=$('<img class="col-sm-offset-3">');
            formGroup.append(label).append(valueDiv).append(img);
            $("#sensorTypeForm").append(formGroup);
        }
    })
</script>

